<template>
	<div id="CheckFrame" class="page screen-full flex-v" >
		<div class="box-left" style="background: linear-gradient(90deg, #005fff, #0092ff); height:60px; font-size: 24px; color: #fff; ">
			<img style="margin: 0 15px;" src="res/frame/logo.png" @click="gotoMenu"/>
			驾驶人自助体检系统
			<div style="text-align: right; flex: 1;margin: 0 1.5rem;">
				<a @click="showStop" style="font-size: 1rem; color: #99ccff; border:solid 1px #99ccff; padding: 4px 10px; border-radius: 16px;"> 
					终止检测
				</a>
			</div>
		</div>
		<div class="menu" style="">
			<span> </span>
			<span :class="{active:menuIndex==1}">信息录入</span>
			<span :class="{active:menuIndex==2}">自助拍照</span>
			<span :class="{active:menuIndex==3}">视力检测</span>
			<span :class="{active:menuIndex==4}">听力检测</span>
			<span :class="{active:menuIndex==5}">变色力检测</span>
			 
			<span :class="{active:menuIndex==6}">躯干检测</span>
			<span :class="{active:menuIndex==7}">上肢检测</span>
			<span :class="{active:menuIndex==8}">下肢检测</span>
			<span :class="{active:menuIndex==9}" @click="modalTitle='abc'; ">信息提交</span> 
			<span style="flex:1;"></span> 
		</div>
		<div style="flex:1; height:934px; background-color: #f8f9fb;  " class="flex-v">
			<router-view></router-view> 
		</div>
		
		<Confirm ref="confirm"></Confirm>
	</div>
</template>

<script>
	import Confirm from './Confirm.vue'
	export default{
		data(){
			return {
				modalTitle:'No Title',
				modalMsg:'No Message', 
				menuIndex:1,
				exitCount:0,
				url:'',
			}
		},
		created(){
			this.url = this.$route.path;
		},
		
		components:{Confirm},
		methods:{
			showStop(){
				const msg = {name:'Abort', remark:'用户退出体检', route:'/home', currentRoute:this.url};
				this.$refs.confirm.show('确定要终止检测吗?', '本提示将在10秒内自动关闭，并视为确定。',()=>{
					this.send(msg);
					this.$router.push('/home');
				})
			},
			
			gotoMenu(){
				this.exitCount++;
				if(this.exitCount >= 5){
					this.exitCount = 0;
					this.$router.push('/menu'); 
				}
			}
		}
	}
</script>

<style scoped="scoped">
	.menu{
		height: 30px; line-height: 30px; background-color: #f8f9fb;
		display: flex;
	}
	.menu span {
		border-bottom: #bccad3 solid 1px;
		width: 100px;
		color: #777;
		
	}
	.menu span.active{
		background-color: #1a9bff;
		color: #fff;
		border-bottom: #0088ff solid 1px;
	}
</style>
